<template>
  <el-card>
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="searchForm.phone" placeholder="请输入搜索的用户名" clearable />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="searchForm.identity" placeholder="请选择搜索角色" clearable>
          <el-option
            v-for="item in allRolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择搜索状态" clearable>
          <el-option label="禁用" :value="0" />
          <el-option label="正常" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleRestSearch()">重置</el-button>
        <el-button type="primary" @click="handleGetTableList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column label="账号" prop="phone" width="180" align="center" />
      <el-table-column label="昵称" prop="username" width="180" align="center" />
      <el-table-column label="角色" width="180" align="center">
        <template #default="{ row }">
          <div>{{ row.roleName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'primary' : 'danger'">{{
            row.status === 1 ? "正常" : "禁用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center"></el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="mt-5 flex justify-center">
      <el-pagination
        :currentPage="currentPage"
        background
        layout="total,prev, pager, next"
        :page-size="limit"
        :total="total"
        @current-change="handleGetTableList"
      ></el-pagination>
    </div>
    <!-- 新增或修改表单 -->
    <form-drawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="账号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="所属角色" prop="identity">
          <el-select v-model="form.identity" placeholder="请选择所属角色" @change="handleGetRole">
            <el-option
              v-for="item in allRolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="department" v-if="form.identity === 344">
          <el-select v-model="form.department" placeholder="请选择所属部门" size="large" >
              <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="所属区县" prop="areaCode">
          <el-select v-model="form.areaCode" placeholder="请选择所属区县">
            <el-option
              v-for="item in areaList"
              :key="item.areaCode"
              :label="item.area"
              :value="item.areaCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            inline-prompt
          ></el-switch>
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input v-model="form.username" placeholder="请输入昵称" clearable />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {
  getUserListApi,
  addUserApi,
  updateUserApi,
  getRoleAllListApi,
  getAreaListApi
} from "@/api/user";
import { de } from "element-plus/es/locales.mjs";

const departmenvalue = ref('')
const departmentList = [
  {
    value: '县级交通运输部门',
    label: '县级交通运输部门',
  },
  {
    value: '市级交通运输部门',
    label: '市级交通运输部门',
  },{
    value: '市维修驾培科',
    label: '市维修驾培科',
  },
];
// 所有角色列表
const allRolesList: any = ref([]);
// 表格
const { tableData, searchForm, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      phone: "",
      identity: "",
      status: "",
      department: '',
      areaCode: ""
    },
    getTableList: getUserListApi
  });
// 编辑
const { formDrawerRef, drawerTitle, form, formRef, rules, handleSubmit, handleCreate, handleEdit } =
  useInitForm({
    form: {
      id: null,
      phone: "",
      identity: "",
      status: 1,
      username: "",
      areaCode: ""
    },
    rules: {
      phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
      identity: [{ required: true, message: "请选择所属角色", trigger: "blur" }],
      username: [{ required: true, message: "请输入昵称", trigger: "blur" }]
    },
    createData: addUserApi,
    updateData: updateUserApi,
    success: () => {
      handleGetTableList();
    }
  });

// 获取区县列表
const areaList = ref<any>([]);
const handleGetAreaList = async () => {
  const res: any = await getAreaListApi();
  areaList.value = res;
};

// 获取角色
const handleRoleList = async () => {
  const res = await getRoleAllListApi();
  allRolesList.value = res;
};
// 切换角色
const handleGetRole = (e: number) => {
  if (e == 5) {
    rules["areaCode"] = [{ required: true, message: "请选择所属区县", trigger: "change" }];
  } else {
    delete rules.areaCode;
    (formRef.value as any).clearValidate();
  }
};
onMounted(async () => {
  handleRoleList();
  handleGetAreaList();
});
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
